<template>
	<view class="yyMod">
		<view class="zyTypeList hasFlex">
			<view class="typeItem"
				
				:class="[index == typeIndex ? 'active' : '',!canMdmZxTypeFlag ? 'disBg' : '']"
				v-for="(item,index) in zxTypeArr"
				:key="index"
				@tap="selectYyType(index,item.id)"
			>
				<text class="iconfont" :class="[item.iconName]"></text>
				<text>{{item.name}}</text>
			</view>
		</view>
		<view class="noteTip">注:1.视频咨询/语音咨询暂支持App端</view>
		<view class="noteTip hasIndent">2.面对面咨询仅支持已入驻机构的咨询师</view>
	</view>
</template>

<script>
	export default {
		props:{
			zxTypeArr:Array,
			canMdmZxTypeFlag:Boolean,
			typeIndex:Number
		},
		methods:{
			selectYyType(index,id){
				if(!this.canMdmZxTypeFlag && id == 3){
					return;
				}
				this.$emit('selectYyType',index,id);
			}
		}
	}
</script>

<style lang='scss' scoped>
	.yyMod{
		margin-bottom: 20rpx;
	}
	.noteTip{
		font-size: 26rpx;
		color: $pss-color-red;
		margin-top: 10rpx;
		&.hasIndent{
			margin-left: 33rpx;
		}
	}
	.typeItem{
		width: 31%;
		height: $pss-height90;
		display: flex;
		justify-content: center;
		align-items: center;
		background: $pss-bg-gray;
		border-radius: 10rpx;
		font-size: $font-size28;
		color: $pss-text-color3;
		margin-right: 3.3%;
		&:first-child{
			&.disBg{
				color: $pss-text-colord;
				.iconfont{
					color: $pss-text-colord;
				}
			}
		}
		&:last-child{
			margin-right: 0;
		}
		.iconfont{
			margin-right: 10rpx;
			color: $pss-text-colora;
			&.icon-shipin{
				font-size: $font-size32;
			}
			&.icon-mianduimian{
				font-size: 46rpx;
			}
			&.icon-dianhuayuyin{
				font-size: 40rpx;
			}
		}
		&.active{
			background: $pss-color-primary_1;
			color: #fff;
			.iconfont{
				color: #fff;
			}
		}
	}
</style>